<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双向绑定</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <h1>{{address}}</h1>
  <div id="app">
    <h1>{{address}}</h1>
    <h2>{{address}}</h2>
    <h3>{{address}}</h3>
    <h4>{{address}}</h4>
    <h5>{{address}}</h5>
    <!-- 
      要操纵Vue的数据，必须设置一个指令v-model
      1、操纵页面元素view，数据Model发生变化
      2、操纵数据model，页面元素内容View随之改变
      Vue和js、jQuery有本质区别:
      1、js它专门有一套api需要学习，需要额外记忆
      2、jQuery本质封装js，简化js写法，又独创一套api，需要额外记忆
      3、Vue完全不同思路，只需操作数据 不同的组件操作方式完全相同，只需要操作数据，无需额外记忆
    -->
    <input type="text" id="address" v-model="address" placeholder="address">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        address: "北京天安门"
      },

    });
  </script>
</body>

</html>